.dd-container {
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 1001;
    .z-color-panel {
        width: 210px;
        border: 1px solid #eeeeee;
        background-color: #ffffff;
        border-radius: 3px;
        padding: 10px 10px 8px 10px;
        .z-color-panel-picker{
            display: block;
            height: 120px;
            border: 1px solid #eeeeee;
            width: 100%;
            box-sizing: border-box;
        }
        .z-color-panel-args-area{
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            .z-color-panel-bar-area{
                display: inline-block;
                flex: 1;
                overflow: hidden;
                padding-right: 8px;
                .z-scroll-area {
                    position: relative;
                    height: 13px;
                    border: 1px solid #eeeeee;
                    box-sizing: border-box;
                    background-color: #dd42c8;
                    .z-color-canvas{
                        display: block;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        bottom: 0px;
                        right: 0px;
                    }
                    .z-bar{
                        display: block;
                        position: absolute;
                        height: 11px;
                        box-sizing: border-box;
                        width: 5px;
                        background-color: #ffffff;
                        border: 1px solid #dddddd;
                        position: absolute;
                        left: 20px;
                        cursor: pointer;
                    }
                }
                .z-opacity-color{
                    margin-top: 4px;
                }
            }  
            .z-current-color-show{
                display: inline-block;
                width: 30px;
                height: 30px;
                border: 1px solid #eeeeee;
                box-sizing: border-box;
                background-color: red;
            } 
        }
        .z-present-color-value{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 8px 0px 0px 0px;
            .z-value{
                input{
                    display: block;
                    height: 20px;
                    width: 100%;
                    box-sizing: border-box;
                    text-indent: 2px;
                }
                label{
                    display: block;
                    width: 100%;
                    text-align: center;
                    font-size: 12px;
                }
                
            }
            .z-hex{
                flex: 0.6;
            }
            .z-rgba{
                width: 30px;
            }
        }
    }
}